<script setup>
import {
    ref,
    reactive,
    getCurrentInstance,
    onMounted,
    computed,
    toRaw,
} from "vue";
import topnav from "../components/topnav.vue";
import { mainStore } from "../store/index";
import { useRouter } from "vue-router";
import dataManagement from "./dataManagement/index.vue";
import Punctuation from "../components/punctuation.vue";
const { proxy } = getCurrentInstance();
const { $mapevent } = proxy;
const $router = useRouter();
const store = mainStore();
const user = localStorage.getItem("token");
// console.log(to,from);
if (!user) {
    $router.push({
        name: "login",
    });
}

let level = computed(() => {
    return store.level;
});
onMounted(() => {
    //把距离获取方法挂载到窗口
    window.ceshi = ceshi;
});
const lon = ref(0);
const lat = ref(0);
const height = ref(0);
function ceshi(xyz) {
    // console.log(xyz);
    lon.value = xyz.lon.toFixed(6);
    lat.value = xyz.lat.toFixed(6);
    height.value = (xyz.height / 1000).toFixed(3);
}
/**
 * 定位标段
 */
function TendersOrient(index) {
    store.Tenders.forEach((element) => {
        if (element.type == index) {
            // console.log(toRaw(element));
            $mapevent.Zoomto(toRaw(element), 1);
            $mapevent.f_AddPyramid(toRaw(element), index);
        }
    });
}
</script>
<template>
    <div id="index">
        <el-container>
            <el-header style="position: absolute; z-index: 999">
                <topnav></topnav>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
            <div class="footerq">
                <div>郑州景观地理空间信息研究院</div>
                <div>
                    级别：{{ level }},经纬度:{{ lon }} , {{ lat }} &nbsp;高度:{{
                        height
                    }}公里
                </div>
            </div>
            <div id="Tenders" v-if="store.TendersShow.show">
                <div class="Tenders_name">
                    <div
                        style="background-color: #ff1e10"
                        @click="TendersOrient(4)"
                    >
                        TJ-4标
                    </div>
                    <div
                        style="background-color: #4fb043"
                        @click="TendersOrient(3)"
                    >
                        TJ-3标
                    </div>
                    <div
                        style="background-color: #ffbe00"
                        @click="TendersOrient(2)"
                    >
                        TJ-2标
                    </div>
                    <div
                        style="background-color: #1d99f8"
                        @click="TendersOrient(1)"
                    >
                        TJ-1标
                    </div>
                </div>
                <div class="Tenders_img">
                    <img src="../assets/topimg/Tenders.png" alt="" />
                </div>
                <div class="Tenders_aside">
                    <div style="left: -20px">K99+013.086</div>
                    <div style="left: -22px">K65+380</div>
                    <div style="left: -18px">K43+190</div>
                    <div style="left: -10px">K21+600</div>
                    <div style="left: 4px">K0+000</div>
                </div>
            </div>
        </el-container>
    </div>
    <Punctuation></Punctuation>
    <el-dialog
        id="data-manage"
        v-model="store.dataManage"
        title="后台管理"
        draggable
        :close-on-click-modal="false"
    >
        <dataManagement></dataManagement>
    </el-dialog>
</template>

<style lang="less">
#index {
    .el-header {
        width: 100%;
        --el-header-padding: 0px;
        /* --el-header-height: 60px; */
    }
    .el-main {
        --el-main-padding: 0px;
    }
    .el-footer {
        display: flex;
        justify-content: space-between;
        /* --el-footer-padding: 0 20px; */
        --el-footer-height: 30px;
        /* padding: var(--el-footer-padding); */
        box-sizing: border-box;
        flex-shrink: 0;
        /* height: var(--el-footer-height); */
        position: absolute;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        line-height: 30px;
        width: 100%;
        color: white;
    }
    .footerq {
        position: fixed;
        bottom: 50px;
        left: calc((100vw - 92vw) / 2);
        width: 92vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #00eeff80;
    }
    #Tenders {
        position: fixed;
        bottom: 70px;
        left: calc((100vw - 800px) / 2);
        width: 800px;
    }
    .Tenders_name,
    .Tenders_img,
    .Tenders_aside {
        display: flex;
        align-items: center;
    }
    .Tenders_name {
        margin: auto;
        width: 764px;
        justify-content: space-around;
        > div {
            flex: 1;
            cursor: pointer;
            text-align: center;
            border-radius: 10px;
            color: #fff;
            font-size: 12px;
            line-height: 18px;
            padding: 0 8px;
        }
    }
    .Tenders_img {
        margin: 4px auto 6px;
        width: 764px;
        justify-content: center;
        > img {
            margin: auto;
            display: block;
        }
    }
    .Tenders_aside {
        font-size: 12px;
        color: #fff;
        justify-content: space-between;
        > div {
            position: relative;
        }
    }
}
#data-manage {
    margin: 0;
    z-index: 2;
    width: calc(100vw);
    height: calc(100vh);
    top: 0px;
    // left: calc((100vw - 300px) / 2);
    pointer-events: auto;
    border: 2px solid #006699;
    background-color: #006699c5;
    .el-dialog__headerbtn {
        top: -2px;
    }
    .el-tree-node__content {
        color: #fff;
    }
    .el-tree-node__content:hover {
        background-color: #0066998a;
    }
    .el-dialog__header {
        width: calc(100% - 40px);
        padding: 10px 20px;
        background-color: #00aaffbe;
        .el-dialog__title {
            color: #fff;
            font-size: 16px;
        }
        .el-icon svg {
            color: #fff;
        }
    }
    .el-dialog__body {
        padding: 0;
        height: calc(100% - 44px);
    }
    .el-form-item__label {
        color: #fff;
    }
    .el-dialog__footer {
        padding: 0 10px 10px;
    }
    .el-table,
    tr,
    .el-table th.el-table__cell {
        background-color: transparent !important;
        color: #fff;
    }
    .el-table__cell:hover {
        background-color: transparent !important;
        color: #fff;
    }
    .el-table {
        --el-table-row-hover-bg-color: transparent;
    }
}
.el-overlay, .el-overlay-dialog{
    pointer-events: none;
}
</style>
